<template>
  <div>
    <div class="table-container">
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button
          v-show="hasPermission('sys:role:add')"
          size="mini"
          @click="handleAdd"
          class="btn-add">添加
        </el-button>
      </el-card>
      <div class="table-container">
        <el-table ref="returnReasonTable"
                  :data="list"
                  style="width: 100%;"
                  v-loading="listLoading" border>
          <el-table-column align="center" label="id" prop="id"/>
          <el-table-column align="center" label="名称" prop="name"/>
          <el-table-column align="center" label="描述" prop="description" />
          <el-table-column align="center" label="添加时间" prop="createTime"/>
          <el-table-column align="center" label="修改时间" prop="updateTime"/>
          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button
                v-show="hasPermission('sys:role:edit')"
                size="mini"
                @click="handleUpdate(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                v-show="hasPermission('sys:role:deleted')"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                v-show="hasPermission('sys:rolePermissionRelation:updateByRole')"
                size="mini"
                @click="handlePermission(scope.$index, scope.row)">配置权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog ref="dialog" :visible.sync="detailDialogVisible" :title="dialogTitle" :before-close="handleClose">
      <el-tree
        ref="tree"
        :data="permissionList"
        show-checkbox
        node-key="value"
        default-expand-all
        :props="defaultProps"
        >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary"  @click="handleDetermine">确定</el-button>
      </div>
    </el-dialog>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15,30]"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {fetchList,deleteData} from '@/api/role';
  import {getTree2} from '@/api/permission';
  import {getByRole,updateByRole} from '@/api/rolePermissionRelation';
  import store from '@/store'
  export default {
    name: 'role',
    components: {},
    data() {
      return {
        list:[],
        listLoading:true,
        detailDialogVisible: false,
        dialogTitle:'权限管理',
        permissionList: [],
        selected:[],
        roleId: null,
        defaultProps:{
          children: 'children',
          label: 'label'
        },
        total: null,
        listQuery: {
          pageNum: 1,
          pageSize: 5
        },
      }
    },
    created() {
      this.getList();
    },
    filters: {
    },
    methods: {
      handleAdd() {
        this.$router.push({
          path: '/sys/roleDetail'
        })
      },
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        }).catch(reason => {

        });
        getTree2().then(response => {
          this.permissionList = response.data //this.getTreeData(response.data,this.data,false)
        }).catch(reason => {

        })
      },
      handleDelete(index, row) {
        this.$confirm('是否要进行该删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteData(row.id).then(response => {
            this.$message({
              message: '删除成功！',
              type: 'success',
              duration: 1000
            });
            this.getList();
          }).catch(reason => {

          });
        })
      },
      handleUpdate(index, row) {
        this.$router.push({
          path: '/sys/roleDetail',
          query: {
            id: row.id
          }
        })
      },
      handlePermission(index, row) {
        let _this = this

        getByRole(row.id).then(response => {
          _this.roleId = row.id
          _this.selected = response.data;
          _this.detailDialogVisible = true
          _this.$nextTick(()=>{
            _this.selected.forEach(select => {
              _this.$refs.tree.setChecked(select,true,false)
            })
          })

        }).catch(reason => {});
      },
      handleDetermine() {
        let params = {}
        params.roleId = this.roleId
        params.permissionIds = this.$refs.tree.getCheckedKeys()
        console.log(params)
        updateByRole(params).then(response => {
          this.detailDialogVisible = false
        }).catch(reason => {

        });
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      handleClose(perms){
        this.detailDialogVisible = false
        this.$refs.tree.setCheckedNodes([])
      },
      hasPermission(perms){
        return store.getters.roles.some(role => perms === role)
      }
    }
  }
</script>
<style>
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
  .input-width {
    width: 80%;
  }
</style>

